<template>
  <div>
    <div class="from-login" >
      <div class="from-login-item">
        <el-input size="small" placeholder="请输入用户名..." v-model="username"></el-input>
      </div>
      <div class="from-login-item">
        <el-input size="small" type="password" v-model="passwd" placeholder="请输入密码..." suffix-icon="el-icon-view"></el-input>
      </div>
      <div class="from-login-item" v-if="isError">
        <p class="error-content">请输入正确的用户名和密码!</p>
      </div>
      <div class="from-login-item">
        <p>忘记密码?</p>
      </div>
      <div class="from-login-item">
        <el-button type="primary" size="small" @click="loginProcess">登录</el-button>
      </div>
      <ul class="from-login-item">
        <li>
          <a href="#" class="el-icon-location">&nbsp;QQ</a>
        </li>
        <li>
          <span>|</span>
        </li>
        <li>
          <a href="#" class="el-icon-time">&nbsp;微信</a>
        </li>
        <li>
          <a href="#" class="login-register">新用户?去注册</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "pwdLogin",
        username:'',
        passwd:"",
        isError:false
      }
    },
    mounted(){
      let _this  = this;
      document.onkeydown=function(e){
        let key = window.event.keyCode;
        if(key === 13){
          _this.loginProcess();
        }
      }
    },
    methods:{
      loginProcess(){
          if(!this.username || !this.passwd ){
            this.isError = true;
          }else{
            if(this.username === 'admin' && this.passwd === 'admin'){
              this.$router.push({name:'Product'});
            }else{
              this.isError = false;
            }
          }
      }
    }
  }
</script>

<style scoped>
  .from-login {
    width: 90%;
    margin: 30px auto;
    border-bottom: 2px #8c939d solid;
  }

  .from-login-item {
    margin: 20px 0;
  }

  .from-login-item p {
    text-align: right;
    font-size: 15px;
  }

  .from-login-item p:hover {
    color: red;
    cursor: pointer;
  }

  .from-login-item .el-button {
    width: 100%;
  }

  .from-login ul {
    margin: 0;
    padding: 0;
    height: 35px;
    position: relative;
  }
  .from-login-item li{
    list-style: none;
    float: left;
    margin: 5px ;
  }
  a{
    text-decoration: none;
    color: #606266;
  }
  .from-login-item li:last-child{
    position: absolute;
    top: 0;
    right: 0;
  }
  .login-register:hover{
    color: red;
  }
  .error-content{
    text-align: center;
    color: red;
  }
</style>
